<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>菜单类型</title>
	</head>
	<link rel="stylesheet" type="text/css" href="../plugins/layui/css/layui.css"/>	
	<script src="../plugins/layui/layui.js" type="text/javascript" charset="utf-8"></script>
	<body>
		<style type="text/css">
			#demo8{
				text-align: center;
			}
		</style>
		<script type="text/html" id="headbar">
			<button class="layui-btn  layui-btn-radius layui-btn-normal" onclick="openWin()">
			  <i class="layui-icon">&#xe608;</i> 添加
			</button>
			 
		</script>
		<script type="text/html" id="col_bar">
			 <button class="layui-btn layui-btn-normal layui-btn-sm" lay-event="update">
			    编辑
			  </button>
			   <button class="layui-btn layui-btn-danger layui-btn-sm" lay-event="delete">
			      删除
			  </button>
		</script>
		
		<table class="layui-table" lay-data="{
				url:'../dataset/table.json', 
				id:'test',
				toolbar:'#headbar'
				}" lay-filter="test">
			<thead>
			    <tr>
			      <th lay-data="{field:'id',width:150, sort: true,align:'center'}">菜单编号</th>
			      <th lay-data="{field:'menuname',width:300,align:'center' }">菜单名称</th>
			      <th lay-data="{field:'description',edit:'text',align:'center'}">菜单描述</th>
			      <th lay-data="{field:'menuAddress',align:'center'}">菜单地址</th>
			      <th lay-data="{field:'menutype',align:'center'}">菜单类型</th>
			      <th lay-data="{field:'wealth',width:150,align:'center',toolbar:'#col_bar',fixed:'right'}">操作</th>
			    </tr>
			  </thead>
			
		</table>
		<div id="demo8"></div>
	</body>
	<script type="text/javascript">
		var lay ;
		layui.use(["table","layer","laypage"],function(){
			var tab = layui.table;
			lay = layui.layer;
			var laypage = layui.laypage;
			var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
			parent.layer.close(index); //再执行关闭 
			
			//自定义排版
			  laypage.render({
			    elem: 'demo8'
			    ,count: 1000
			    ,layout: ['limit', 'prev', 'page', 'next']
			  });
			tab.on("edit(test)",function(obj){
				console.log(obj.value); //得到修改后的值
			    console.log(obj.field); //当前编辑的字段名
			  	console.log(obj.data); //所在行的所有相关数据  
				
			});
			
			tab.on("toolbar(test)",function(obj){
				lay.msg(obj.event);
			});
			
			tab.on("tool(test)",function(obj){
				if(obj.event === "update"){
					lay.msg("你确定要修改了吗？");
					obj.update({
						username:"修改后的值"
					});
				}else if(obj.event === "delete"){
					lay.confirm('确定删除吗?', {icon: 3, title:'提示'}, function(index){
					  //do something
					  lay.close(index);
					  obj.del();//删除当前行
					});
				}
			})
		})	
		//弹出层
		function openWin(){
			lay.open({
				type:2,
				content:'addMenuType.html',
				area:['700px','400px'],
				shade:0.3,
				anim:1
			})
		}
			
	</script>
</html>
